export default function useItemMove(focusItem) {
    let dragState = null
    const mousemove = (e) => {
        let { clientX:moveX,clientY:moveY } = e
        let durX=moveX-dragState.startX
        let durY=moveY-dragState.startY
        focusItem.value.focusArr.forEach((item,idx)=>{
            item.top = dragState.startFocus[idx].top+durY
            item.left = dragState.startFocus[idx].left+durX
        })
    }
    const mouseup = (e) => {
        document.removeEventListener("mousemove",mousemove)
        document.removeEventListener("mouseup",mouseup)
    }

    const mousedownAfter = (e) => {
        dragState = {
            startX : e.clientX,
            startY : e.clientY,
            startFocus : focusItem.value.focusArr.map(({top,left})=>({top,left}))
        }
        document.addEventListener("mousemove",mousemove)
        document.addEventListener("mouseup",mouseup)

    }

    return {
        mousedownAfter
    }
}